

<style>

.moi-tabs{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}


.moi-tabs-content-comment{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.moi-tabs-content-comment-item{
  margin-bottom: 0;
  width: 100%;
}



.moi-tabs{
  flex-direction: column;
  border-top: 1px solid #dddddd;
  border-bottom: none;
  gap: 0;
}

.moi-tabs .moi-tabs-item{
  border-bottom: 1px solid #dddddd;
  width: 100%;
}
.moi-tabs .moi-tabs-title{
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  color: var(--color-main);
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  align-items: center;
}
.moi-tabs .moi-tabs-content{
  display: none;
  padding-bottom: 20px;
}
.moi-tabs .moi-tabs-active .moi-tabs-content{
  position: relative;
  display: block;
}


.moi-tabs .moi-tabs-active .tabs--icon-add{
  display: none;
}
.moi-tabs .moi-tabs-active .tabs--icon-reduce{
  display: block;
}
.moi-tabs .tabs--icon-add{
  display: block;
}
.moi-tabs .tabs--icon-reduce{
  display: none;
}
.moi-tabs .video-icon{
  position: absolute;
   z-index: 100;
  top: 40px;
  left: 40px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (min-width: 767px) {
  .moi-tabs-content-comment{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
  }
  .moi-tabs-content-comment-item{
    break-inside: avoid-column; margin-bottom: 15px;
  }



  .moi-tabs-style-tab{
    flex-direction: row;
    gap: 30px;
    border-bottom: 1px solid var(--color-divider);
    border-top: none;
  }

  .moi-tabs-style-tab .moi-tabs-item{
    border-bottom: none;
    width:  auto !important;
  }
  .moi-tabs-style-tab .moi-tabs-content{
    display: none;
    padding: 20px 0 !important;
  }
  .moi-tabs-style-tab .moi-tabs-active .moi-tabs-content{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  .moi-tabs-style-tab .moi-tabs-active .moi-tabs-title{
    color: var(--color-main);
    position: relative;
    border-bottom: 4px solid var(--color-main);
    font-weight: 600;
  }
  .moi-tabs-style-tab .moi-tabs-title{
    padding: 12px 0;
    font-size: var(--product_font_size);
    color: var(--color-text-low);
    cursor: pointer;
  }
  .moi-tabs-style-tab .moi-tabs--item-icon{
    display: none;
  }
  .moi-tabs-style-tab .tabs--icon-add,.moi-tabs-style-tab .tabs--icon-reduce{
    display: none;
  }
}




</style>
{% assign tabsType = tabs_type |  default:"tab" %}
<ul class="moi-tabs moi-tabs-style-{{tabsType}}" id="product-tabs">
  <li class="moi-tabs-item" data-type="detail" >
    <div class="moi-tabs-title">
      <div>{{lang.product.detail}}</div>
      {% include 'product_tabs_icon' %}
    </div>
    <div class="moi-tabs-content mo-editor-reset plugin-product_detail-content" >{{product_detail.body_html|html_content_filter}}</div>
  </li>
  {% if storeConfig.comments_status == 1 %}
  <li class="moi-tabs-item" data-type="comment" weight="50">
    <div class="moi-tabs-title">
      <div>{{lang.product.customer_reviews}}</div>
      {% include 'product_tabs_icon' %}
    </div>
    <div class="moi-tabs-content" id="comment-bottom-warp">
          {% if comments.size > 0 %}
          <div class="moi-tabs-content-comment" >
          {% for comment in comments %}
          {% assign commentIndex = forloop.index %}
          <div class="comment_warp moi-tabs-content-comment-item">
                  <div class="comment_warp-header mo-flex mo-j-space-between">
                    <div class="mo-flex">
                      <img class="comment_warp-header-nation" data-country-img="{{comment.country_id}}" style="height: auto;" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" />
                      <span>{{comment.customer_name}} <span style="color:#888888;margin-left:4px">{% if storeConfig.hide_time == '0' %}{% if comment.created_at !=0 %} {{comment.created_at | date: "%Y-%m-%d"}} {% endif %}{% endif %}</span></span>
                    </div>
                  </div>
                  <div class="comment_warp-score">
                    
                    {% for index in (1..5) %}
                    {%- capture fill_color -%}
                      {%- if index <= comment.star -%}
                        {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
                        {%- else -%}
                        {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
                      {%- endif -%}
                    {%- endcapture -%}
                    <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
                      <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
                    </svg>
                    {% endfor %}
          
                  </div>
                  <div class="comment_warp-content">
                    {% if comment.comment_title != "" and storeConfig.comments_title_require != '0'  %}
                      <p class="comment_warp-content-lable" style="font-weight: bold; color: #333;    margin-bottom: 4px;">{{comment.comment_title}}</p>
                    {% endif %}
          
                    <p class="comment_warp-content-lable">{{comment.content}}</p>
                    <!-- <div class="comment_warp-content-review">{{lang.comments.show_fill_review}}</div> -->
                    <div class="comment_warp-images">
                      {% if  comment.images.src %}
                      {% for image in comment.images.src %}
                      {% assign keyIndex = forloop.index %}
                      {%- assign params = image |public_front_asset_url|parseUrlParams: 'array'  -%}
                      {%- if params.video  -%}
                      <div  style="position: relative;">
                      {%- include 'default_icon', icon:"video", height:"20", width:"20" -%}
                      <img src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" data-src="{{image|public_front_asset_url}}" data-parent="{{commentIndex}}"  data-index="{{keyIndex}}" />
                      </div>
                      {%- else -%}
                      <img src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" data-src="{{image|public_front_asset_url}}" data-parent="{{commentIndex}}"  data-index="{{keyIndex}}" />
                      {% endif %}
                    {% endfor %}
                      {% endif %}
                    </div>
          
                    {% if comment.reply_content != "" %}
                    <div class="comment-reply-warp">
                      <div class="comment-reply-warp-title">
                        <span class="comment-reply-warp-name">{{lang.comments.reply}}:</span>
                        {% if comment.replied_at != 0  and storeConfig.hide_time != '1' %}
                        <span class="comment-reply-warp-date">{{comment.replied_at | date: "%Y-%m-%d"}}</span>
                        {% endif %}
                      </div>
                      <div class="comment-reply-warp-content">{{comment.reply_content}}</div>
                    </div>
                    {% endif %}
                  </div>
          </div>
          {% endfor %}
          </div>
          {% else %}
          {% include "empty" ,text:lang.comments.no_comments, icon:"comment" %}
          {% endif %}
      <div style="justify-content: center;display: flex;gap: 20px;">
        {% if storeConfig.customer_comment_status == 1 and storeConfig.comments_status == 1 %}
          <a href="/comments/{{product_detail.handle}}?writeComment=true" class="comment-btn secondary_btn">
            {{- lang.comments_detail.write -}}
          </a>
        {%- endif -%}
        <a href="/comments/{{product_detail.handle}}" class="comment-btn main_btn">
          {{- lang.product.all_comment -}}
        </a>
      </div>
    
    </div>
  </li>
  {% endif %}
</ul>
{% include comment %}
<script type="text/x-template" id="id-comment-empty">
{% include "empty" ,text:lang.comments.no_comments, icon:"comment" %}
</script>
<script>
  (function(){
    function tabItemEvent(){
      const diffTop =  $(this).parent().offset().top - $(window).scrollTop()
      {% if section.settings.tabs_open_all and tabsType == 'accordion' %}
        $(this).parents(".moi-tabs-item").toggleClass("moi-tabs-active")
      {% else %}
        $(this).parents(".moi-tabs-item").toggleClass("moi-tabs-active").siblings().removeClass("moi-tabs-active");
      {% endif %}
      {% if tabsType == "tab" %}
        if(!moi.isMobile()){
        var h = $(this).siblings(".moi-tabs-content").outerHeight();
        $(this).parents(".moi-tabs").css("margin-bottom",h + "px")
        }

      {% else %}
        if($(window).scrollTop() > $(this).parent().offset().top ){
          $("html,body").stop().animate({ scrollTop: $(this).parent().offset().top - diffTop }, 0, "slow");
        }
      {% endif %}
    }

    function renderTab(item,classStr){
        const display = item.display === undefined ? true : item.display;
        const id = item.id || new Date().getTime();
        return $(`
          <li data-type="app"  class="moi-tabs-item {% if section.settings.tabs_open_all and tabsType == 'accordion' %}moi-tabs-active{% endif %}" style="display: ${!display?'none':'block'};" data-id="${id}" id="tabs-${id}" weight="${item.weight}" ${classStr}">
            <div class="moi-tabs-title">
              <div>${item.title}</div>
              {% include 'product_tabs_icon' %}
            </div>
            <div class="moi-tabs-content mo-editor-reset" >
              ${item.content}
            </div>
          </li>
          `)
    }

    function addProductTab(tabData,classStr) {
      if (!Array.isArray(tabData)) {
          console.error("tab data error");
          return false;
      }
      // tabData.sort((a,b)=>a.weight - b.weight)
      // const beforeComment = tabData.filter(item=>item.weight > 50).sort((a,b)=>b.weight - a.weight);
      // const afterComment = tabData.filter(item=>item.weight <= 50).sort((a,b)=>a.weight - b.weight);
   
      tabData.forEach((item) => {
          var tabItem = renderTab(item,classStr);
          var beforeIndex = -1;
          $(".moi-tabs .moi-tabs-item").each(function(index,el){
            var weight = parseInt($(el).attr("weight"))
            if($(el).attr("data-type") === "comment"){
              weight = 50
            }
            if(item.weight > weight){
              beforeIndex = index
              return false
            }
          })
          if(beforeIndex === -1){
            $("#product-tabs").append(tabItem);
          }else{
            $(".moi-tabs .moi-tabs-item").eq(beforeIndex).before(tabItem);
          }

          tabItem.find(".moi-tabs-title").click(tabItemEvent)
      });
      // afterComment.forEach((item) => {
      //     var tabItem = renderTab(item,classStr);
      //     $("#product-tabs").append(tabItem);
      //     tabItem.find(".moi-tabs-title").click(tabItemEvent)
      // });

    }

    function getCountryFlag(item){
      if (!item || !_GET_C_SETTING_("countrys")[item]) {
          return `${_GET_C_SETTING_("imgcdn")}/statics/country/flag/default.png`;
      } else {
          const file = _GET_C_SETTING_("countrys")[item].country_code_2.toLowerCase();
          return `${_GET_C_SETTING_("imgcdn")}/statics/country/flag/${file}.png?x-oss-process=image/resize,m_lfit,w_200`;
      }
    }
    $("[data-country-img]").each(function(){
      $(this).attr("src",getCountryFlag($(this).attr("data-country-img")));
    })
    var commentList = {{comments|pubic_front_imgcdn_replace|json}};
    console.log(commentList)
    $("#product-tabs .comment_warp-images img").click(function () {
        const JqThis = $(this);
        const parentIndex = JqThis.data("parent");
        moi.pictureImages(commentList[parentIndex-1].images.src, JqThis.data("index") - 1, JqThis)
    })
    $("#product-tabs .moi-tabs-title").click(tabItemEvent)
   
    window["addProductTab"] = addProductTab
    window["changeProductTab"] = function(values){
      var tabId = $(".moi-tabs-active").data("id");
      var currentTab = values.find(item=>item.id == tabId);
      if(currentTab && !currentTab.display){
        $("#product-tabs .moi-tabs-title").eq(0).click();
      }
      // if($(".moi-tabs-active").attr("data-type") !== "detail"){
      //   $("#product-tabs .moi-tabs-title").eq(0).click();
      // }
      values.forEach((item)=>{
        if(item.display){
          $("#tabs-"+item.id).show()
        }else{
          $("#tabs-"+item.id).hide()
        }
      })
      
    }

    document.addEventListener("DOMContentLoaded",function(){
      {% if section.settings.tabs_open_all %}
          {% if tabsType == "accordion" %}
            $("#product-tabs .moi-tabs-item").addClass('moi-tabs-active');
          {% else %}
            if(moi.isMobile()) {
              $("#product-tabs .moi-tabs-item").addClass('moi-tabs-active');
            }else {
              $("#product-tabs .moi-tabs-title").eq(0).trigger("click");
            }
          {% endif %}
      {% else %}
        $("#product-tabs .moi-tabs-title").eq(0).trigger("click");
      {% endif %}
    })
    {% if tabsType == "tab" %}
    var oldHeight = 0;
    function setDatailHeight(){
      var targetElement = $('.moi-tabs-active[data-type="detail"]').find(".moi-tabs-content");
      if(targetElement.length === 0){
        return 
      }
      var outerHeight = targetElement.outerHeight();
      if(outerHeight > 0 && outerHeight !== oldHeight){
        oldHeight = outerHeight;
        $(".moi-tabs-active").parents(".moi-tabs").css("margin-bottom",outerHeight + "px")
      }
    }
   
    

    window.addEventListener('resize', function(event) {
      if(!moi.isMobile()){
        setDatailHeight();
      }else{
        $(".moi-tabs").css("margin-bottom","0px")
      }
    });
    

    if(!moi.isMobile()){
      const element = document.getElementsByClassName("plugin-product_detail-content");
      const resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
          setDatailHeight();
        }
      });

      resizeObserver.observe(element[0]); // 开始监听元素尺寸变化
    }

    {% endif %}

  })()

</script>

